<template>
	<view>
		<!-- <back></back> -->
		<mescroll-body :sticky="true" ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback">

			<view class="five">
				<view class="five_item" v-for="item in flowList">
					<view class="five_in u-flex u-row-between">
						<view class="u-flex">
							<image :src="item.user.avatar" mode="aspectFill"></image>
							<view>
								<view class="fiv_tit">{{item.user.nickname}}</view>
								<!-- <view class="fiv_num">12/15</view> -->
							</view>
						</view>
						<view class="u-flex">
							<i class="iconfont iconyduixingxingshixin icon-font-color"
								style="margin-right: 20rpx;"
								:style="{backgroundImage: aindex< item.score?`-webkit-linear-gradient(270deg, #F46C22 0%, #F46C22 100%)`:`-webkit-linear-gradient(270deg, #f4f6f8 0%, #ccc 100%)`}"
								v-for="(aitem,aindex) in item.score" :key="aindex"></i>
						</view>
						<!-- <u-rate :count="count" v-model="item.score"></u-rate> -->
						<!-- <view class="fiv_btn u-flex-center">回复</view> -->
					</view>
					<view class="gui">规格：{{item.suk}}</view>
					<view class="fiv_cont" v-html="item.content"></view>
					<view class="u-flex u-flex-wrap">
						<view class="fen_pho u-flex-center" @click="yu(it,ind)" v-for="it,ind in item.images">
							<image :src="it" class="img_tu" mode="w"></image>
						</view>
					</view>
				</view>
			</view>
		</mescroll-body>
	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				id: '',
				flowList: [],
				count: 5,
				value: 2
			}
		},
		onLoad(options) {
			this.id = options.id
		},
		methods: {
			upCallback(page) {
				this.mescroll.optDown.use = false;
				this.mescroll.optUp.textNoMore = '- 已经到底啦 -'
				this.$u.post('/api/wanlshop/product/comment', {
					page: page.num,
					limit: page.size,
					id: this.id
				}).then(res => {
					this.mescroll.endBySize(res.data.comment.data.length, res.data.comment.total);
					if (page.num == 1) this.flowList = []; //如果是第一页需手动制空列表
					this.flowList = this.flowList.concat(res.data.comment.data); //追加新数据

				}).catch(() => {
					//联网失败, 结束加载
					this.mescroll.endErr();
				})
			},
			yu(it,ind) {
				// 预览图片
				let imgsArray = [];
				imgsArray.push(it);
				uni.previewImage({
					current: ind,
					urls: imgsArray
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.five {
		.five_item {
			padding: 0 20rpx;
			background: #fff;
			margin-top: 20rpx;
		}

		.five_in {
			padding: 20rpx 0;
			margin-top: 10rpx;

			image {
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
				margin-right: 20rpx;
			}

			.fiv_tit {
				font-size: 28rpx;
				font-weight: bold;
				color: #333;
			}

			.fiv_num {
				font-size: 24rpx;
				color: #333;
				margin-top: 7rpx;
			}

			.fiv_btn {
				width: 104rpx;
				height: 40rpx;
				font-size: 20rpx;
				font-weight: bold;
				color: #FFF;
				border-radius: 20rpx;
				background: linear-gradient(to right, #2BB984, #8CD994);
			}
		}

		.gui {
			color: #aaa;
			font-size: 26rpx;
		}

		.fiv_cont {
			font-size: 28rpx;
			color: #333333;
			padding-bottom: 20rpx;
		}

		.fen_pho {
			width: 168rpx;
			height: 168rpx;
			border-radius: 20rpx;
			overflow: hidden;
			margin-right: 28rpx;
			margin-bottom: 28rpx;

			.img_tu {
				width: 100%;
				height: 100%;
			}
		}
	}
</style>